<template>
	<div class="betting-odds-plus" :class="classList">
		<div class="cur-odds">
			<span>{{ fmtOdds(curOdds, true) }}</span>
			<base-icon v-if="hasRise" name="rise"></base-icon>
		</div>
		<div v-if="hasRise" class="old-odds">
			{{ fmtOdds(oldOdds, true) }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { computed, PropType } from 'vue'
import { BettingResult } from '@/enums'
import { fmtOdds } from '@/utils'
const props = defineProps({
	displayOdds: {
		type: [Number, String],
		required: true
	},
	comboBonusOdds: {
		type: Number,
		default: 0
	},
	outcome: {
		type: String as PropType<BettingResult>
	}
})

const curOdds = computed(() => +props.displayOdds + (props.comboBonusOdds || 0))

const oldOdds = computed(() => props.displayOdds)

const hasRise = computed(() => props.comboBonusOdds)

const classList = computed(() => {
	const res = []
	if (hasRise.value) {
		res.push('rise')
	}
	if (props.outcome) {
		res.push('outcome')
	}
	switch (props.outcome) {
		case BettingResult.win:
		case BettingResult.winHalf:
		case BettingResult.cashout:
			res.push('win')
			break
		case BettingResult.lose:
		case BettingResult.loseHalf:
			res.push('lose')
	}
	return res
})
</script>

<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;
.betting-odds-plus {
	text-align: right;
	border-radius: 20px 0px 0px 20px;
	color: var(--color-primary);
	&.outcome {
		padding: 4px 8px 4px 12px;
		margin-right: -8px;
	}
	.cur-odds {
		font-size: 16px;
		line-height: 20px;
		@include font-bold();
		display: flex;
		align-items: center;
		.my-icon {
			margin-left: 2px;
			font-size: 12px;
		}
	}
	.old-odds {
		font-size: 12px;
		line-height: 14px;
		color: var(--color-text-3);
		text-decoration: line-through;
	}
	&.win {
		color: var(--color-success);
		&.rise {
			background-color: var(--color-success);
			color: var(--color-white);
			.old-odds {
				color: rgba($color: #ffffff, $alpha: 0.5);
			}
		}
	}
	&.lose {
		color: var(--color-danger);
		&.rise {
			background-color: var(--color-danger);
			color: var(--color-white);
			.old-odds {
				color: rgba($color: #ffffff, $alpha: 0.5);
			}
		}
	}
}
</style>
